import { memo, useRef, useEffect } from "react";
import Horizen from "../../baseUI/horizen-item/index";
import { categoryTypes, alphaTypes } from "../../api/config";
import Scroll from "../../baseUI/scroll/index";
import { NavContainer, ListContainer, List, ListItem } from "./style";
import {
  getSingerList,
  getHotSingerList,
  changeEnterLoading,
  changePageCount,
  refreshMoreSingerList,
  changePullUpLoading,
  changePullDownLoading,
  refreshMoreHotSingerList,
  changeCatogory,
  changeAlpha,
} from "./store/actionCreators";
import { connect } from "react-redux";
import Loading from "../../baseUI/loading/index";
import LazyLoad, { forceCheck } from "react-lazyload";

function Singers(props) {
  const scrollRef = useRef(null)
  const {
    singerList,
    enterLoading,
    pullUpLoading,
    pullDownLoading,
    pageCount,
    category,
    alpha,
  } = props;
  const {
    getHotSingerDispatch,
    updateDispatch,
    pullUpRefreshDispatch,
    pullDownRefreshDispatch,
    updateCategory,
    updateAlpha,
  } = props;

  useEffect(() => {
    if (!singerList.size) {
      getHotSingerDispatch();
    }
  }, [singerList, getHotSingerDispatch]);

  const singerListJS = singerList ? singerList.toJS() : [];

  const handleUpdateCatetory = (val) => {
    if(category === val) return
    updateCategory(val)
    scrollRef.current.refresh()
  };

  const handleUpdateAlpha = (val) => {
    if(alpha === val) return
    updateAlpha(val)
    scrollRef.current.refresh()
  };

  const handlePullUp = () => {
    pullUpRefreshDispatch(category, alpha, category === "", pageCount);
  };

  const handlePullDown = () => {
    pullDownRefreshDispatch(category, alpha);
  };

  const renderSingerList = () => {
    return (
      <List>
        {singerListJS.map((item, index) => {
          return (
            <ListItem key={index}>
              <div className="img_wrapper">
                <LazyLoad placeholder={<div style={{width: '100%', height: '100%', backgroundColor: 'red'}}>占位图</div>}>
                  <img
                    src={`${item.picUrl}?parap=300x300`}
                    width="100%"
                    height="100%"
                    alt="歌手"
                  />
                </LazyLoad>
              </div>
              <span className="name">{item.name}</span>
            </ListItem>
          );
        })}
      </List>
    );
  };

  return (
    <>
      <NavContainer>
        <Horizen
          list={categoryTypes}
          title={"分类（默认热门）："}
          handleClick={handleUpdateCatetory}
          oldVal={category}
        ></Horizen>
        <Horizen
          list={alphaTypes}
          title={"首字母："}
          handleClick={handleUpdateAlpha}
          oldVal={alpha}
        ></Horizen>
      </NavContainer>
      <ListContainer>
        <Scroll
        ref={scrollRef}
          pullUpLoading={pullUpLoading}
          pullDownLoading={pullDownLoading}
          pullUp={handlePullUp}
          pullDown={handlePullDown}
          onScroll={forceCheck}
        >
          {renderSingerList()}
        </Scroll>
      </ListContainer>
      {enterLoading && <Loading></Loading>}
    </>
  );
}

const mapStateToProps = (state) => ({
  singerList: state.getIn(["singers", "singerList"]),
  enterLoading: state.getIn(["singers", "enterLoading"]),
  pullUpLoading: state.getIn(["singers", "pullUpLoading"]),
  pullDownLoading: state.getIn(["singers", "pullDownLoading"]),
  pageCount: state.getIn(["singers", "pageCount"]),
  category: state.getIn(["singers", "category"]),
  alpha: state.getIn(["singers", "alpha"]),
});

const mapDispatchToProps = (dispatch) => {
  return {
    updateCategory(newVal) {
      dispatch(changeCatogory(newVal))
      dispatch(getSingerList())
    },
    updateAlpha(newVal) {
      dispatch(changeAlpha(newVal))
      dispatch(getSingerList())
    },
    getHotSingerDispatch() {
      dispatch(getHotSingerList());
    },
    updateDispatch() {
      dispatch(changePageCount(0));
      dispatch(changeEnterLoading(true));
      dispatch(getSingerList());
    },
    // 滑到最底部刷新部分的处理
    pullUpRefreshDispatch(category, alpha, hot, count) {
      dispatch(changePullUpLoading(true));
      dispatch(changePageCount(count++));
      if (hot) {
        dispatch(refreshMoreHotSingerList());
      } else {
        dispatch(refreshMoreSingerList(category, alpha));
      }
    },
    //顶部下拉刷新
    pullDownRefreshDispatch(category, alpha) {
      dispatch(changePullDownLoading(true));
      dispatch(changePageCount(0));
      if (category === "" && alpha === "") {
        dispatch(getHotSingerList());
      } else {
        dispatch(getHotSingerList(category, alpha));
      }
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(memo(Singers));
